<template>
    <el-container>
        <el-container>
            <el-container>
                <el-main class="main">
                    <h2>欢迎来到城市智慧停车管理系统</h2>
                    <p>登陆后请选择左侧菜单以开始操作。</p>
                    <el-divider></el-divider>
                    <!-- 统计数据 -->
                    <div>
                        <el-row :gutter="20">
                            <!-- 停车场总数 -->
                            <el-col :span="6">
                                <div>
                                    <el-statistic group-separator="," :value="totalParkingLots" title="停车场总数">
                                        <template slot="suffix">个</template>
                                    </el-statistic>
                                </div>
                            </el-col>
                            <!-- 停车位利用率 -->
                            <el-col :span="6">
                                <div>
                                    <el-statistic :value="parkingSpaceUsageRate" title="停车位利用率">
                                        <template slot="suffix">%</template>
                                    </el-statistic>
                                </div>
                            </el-col>
                            <!-- 实时空余车位 -->
                            <el-col :span="6">
                                <div>
                                    <el-statistic group-separator="," :value="availableSpaces" title="实时空余车位">
                                        <template slot="suffix">个</template>
                                    </el-statistic>
                                </div>
                            </el-col>
                            <!-- 用户满意度 -->
                            <el-col :span="6">
                                <div>
                                    <el-statistic :value="like ? 521 : 520" title="用户满意度">
                                        <template slot="suffix">
                                            <span @click="like = !like" class="like">
                                                <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
                                                <i class="el-icon-star-off" v-show="!like"></i>
                                            </span>
                                        </template>
                                    </el-statistic>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <el-divider></el-divider>
                    <!-- 轮播图 -->
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <div class="block">
                                <el-carousel height="200px">
                                    <el-carousel-item v-for="(item, index) in images1" :key="index">
                                        <img :src="item" alt="轮播图片"
                                            style="width: 100%; height: 100%; object-fit: cover;" />
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="block">
                                <el-carousel height="200px">
                                    <el-carousel-item v-for="(item, index) in images2" :key="index">
                                        <img :src="item" alt="轮播图片"
                                            style="width: 100%; height: 100%; object-fit: cover;" />
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                        </el-col>
                    </el-row>

                    <el-divider></el-divider>
                    <!-- 新闻卡片 -->
                    <NewsCard />
                    <el-divider></el-divider>
                    <!-- 实时数据卡片 -->
                    <div>
                        <el-row :gutter="20">
                            <!-- 实时车位统计 -->
                            <el-col :span="14">
                                <el-card shadow="hover" style="width: 100%;">
                                    <div style="width: 100%; display: inline-block;">
                                        <el-statistic :value="availableSpaces" title="🅿️实时空余车位">
                                            <template slot="suffix">个</template>
                                        </el-statistic>
                                    </div>
                                </el-card>

                                <!-- 优惠活动倒计时 -->
                                <el-card shadow="hover" style="width: 100%; margin-top: 20px;">
                                    <div style="width: 100%; display: inline-block;">
                                        <el-statistic @finish="notifyDiscountEnd" :value="discountDeadline" time-indices
                                            title="限时优惠倒计时">
                                            <template slot="suffix">
                                                <el-button type="primary" size="mini" @click="extendDiscount">立即参与
                                                </el-button>
                                            </template>
                                        </el-statistic>
                                    </div>
                                </el-card>

                                <!-- 城市活动倒计时 -->
                                <el-card shadow="hover" style="width: 100%; margin-top: 20px;">
                                    <div style="width: 100%; display: inline-block;">
                                        <el-statistic format="DD天HH小时mm分钟" :value="eventCountdown" time-indices
                                            title="🚗 距离市区活动日还有：">
                                        </el-statistic>
                                    </div>
                                </el-card>
                            </el-col>

                            <!-- 车场公告 -->
                            <el-col :span="10">
                                <el-card shadow="hover" style="width: 100%;">
                                    <div slot="header" class="clearfix">
                                        <span>停车场公告</span>
                                        <el-button style="float: right; padding: 3px 0" type="text"
                                            @click="toggleNoticeScroll">暂停</el-button>
                                    </div>
                                    <div style="font-size: 18px; text-align: center; margin-top: 35px;">
                                        新增停车场：中央广场地下停车场
                                    </div>
                                    <div style="font-size: 18px; text-align: center;">开放时间：06:00 - 23:00</div>
                                    <div style="font-size: 18px; text-align: center;">优惠时段：周末全天 8 折</div>
                                    <div style="margin-top: 35px;"></div>
                                    <el-statistic ref="announcementCountdown" @finish="notifyNoticeEnd"
                                        format="HH:mm:ss" :value="noticeDuration" title="公告时间剩余：" time-indices>
                                    </el-statistic>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                    <el-divider></el-divider>
                    <!-- 进度条 -->
                    <div class="demo-progress">
                        <el-progress :percentage="100" status="success" />
                    </div>
                    <!-- 日历 -->
                    <el-calendar v-model="time">
                    </el-calendar>
                </el-main>
                <!-- 底部 Footer -->
                <el-footer class="footer">
                    © 2024 城市智慧停车管理系统. 版权所有.
                </el-footer>
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
import NewsCard from "@/components/NewsCard.vue";
import { getTotalParkingLots, getParkingSpaceUsageRate, getTimelyAvailableSpaces } from "@/api/parkingGuidanceInfo.js";

// import NavMenu from "@/components/NavMenu.vue";
// import HeaderMenu from "@/components/HeaderMenu.vue";
export default {
    name: "WelcomePage",
    components: {
        NewsCard,
        // NavMenu,
        // HeaderMenu,
      
    },
    data() {
        return {
            totalParkingLots: 0,          // 停车场总数
            parkingSpaceUsageRate: 0,   // 停车位利用率
            availableSpaces: 0,          // 实时空余车位
            like: true,                     // 用户满意度状态
            time: new Date(),  //   日历时间
            images1: [
                require('@/assets/ujn0.jpg'),
                require('@/assets/ujn1.jpg'),
                require('@/assets/ujn2.jpg'),
                require('@/assets/ujn3.jpg'),
            ],
            images2: [
                require('@/assets/ujn2.jpg'),
                require('@/assets/ujn3.jpg'),
                require('@/assets/ujn0.jpg'),
                require('@/assets/ujn1.jpg'),
            ],// 轮播图图片
            // 公告卡片
            discountDeadline: Date.now() + 1000 * 60 * 30, // 限时优惠活动截止时间
            eventCountdown: new Date("2024-12-01"), // 市区活动日日期
            noticeDuration: Date.now() + 1000 * 60 * 5, // 公告持续时间
            stopNotice: true, // 控制公告计时暂停
        };
    },
    mounted() {
        this.fetchParkingData(); // 初始化时获取停车场数据
        this.startAutoUpdate();   // 启动定时更新
    },
    methods: {
        navigateTo(routeName) {
            this.$router.push({ name: routeName }).catch(err => {
                if(err.name != 'NavigationDuplicated'){
                    throw err;
                }
            }); // 跳转到对应路由
        },

        // 公告计时器相关方法
        notifyDiscountEnd() {
            this.$notify({
                title: "优惠结束",
                message: "限时优惠已结束，请关注其他活动。",
                duration: 0,
            });
        },
        extendDiscount() {
            this.discountDeadline += 1000 * 60 * 10; // 延长10分钟
        },
        toggleNoticeScroll() {
            this.$refs.announcementCountdown.suspend(this.stopNotice);
            this.stopNotice = !this.stopNotice;
        },
        notifyNoticeEnd() {
            this.$notify({
                title: "公告结束",
                message: "公告已结束，请及时关注新的通知。",
                duration: 0,
            });
        },
        // 页面数据计算
        async fetchParkingData() {
            try {
                const [totalParkingRes, usageRateRes, availableSpacesRes] = await Promise.all([
                    getTotalParkingLots(),           // 获取停车场总数
                    getParkingSpaceUsageRate(),     // 获取停车位利用率
                    getTimelyAvailableSpaces()      // 获取实时空余车位
                ]);

                this.totalParkingLots = totalParkingRes;          // 更新停车场总数
                this.parkingSpaceUsageRate = parseFloat(usageRateRes.toFixed(2));       // 更新停车位利用率
                this.availableSpaces = availableSpacesRes;        // 更新实时空余车位
            } catch (error) {
                console.error('Failed to fetch parking data:', error);
            }
        },

        // 启动定时器，每10秒更新一次数据
        startAutoUpdate() {
            setInterval(() => {
                this.fetchParkingData();  // 定时更新停车场数据
            }, 5000);  // 每10秒更新一次
        },
    },

};
</script>

<style scoped>
/* 样式定义 */
.main {
    /* background-color: #fcfcfc; */
    color: #333;
    padding: 20px;
    padding-top: 80px;
    /* 给顶栏高度留出空间 */
    margin-left: 200px;
    /* 给aside留出空间，200px为aside宽度 */
    background-image: url('../assets/color3.png');
    /* 背景图像 */
    opacity: 1;
    /* 设置透明度，值范围 0 (完全透明) 到 1 (完全不透明) */
    background-size: cover;
    /* 背景图像铺满整个容器 */
    background-repeat: no-repeat;
    /* 背景图像不重复 */
    background-position: center;
    /* 将图像居中显示 */
}
.footer {
    background-color: #7d7e7f;
    color: #333;
    text-align: center;
    line-height: 40px;
    border-radius: 20px;
    /* 圆角 */
    padding: 10px;
    z-index: 1001;
}

.like {
    cursor: pointer;
    font-size: 25px;
    display: inline-block;
}
/* 进度条大小 */
.demo-progress .el-progress--line {
    margin-bottom: 15px;
    max-width: 100%;
}
</style>